<template>
  <view class="my-orders">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <image class="back-icon" src="/static/back.png" @click="goBack"></image>
    </view>

    <!-- 标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }" 
        @click="switchTab(0)"
      >
        全部
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }" 
        @click="switchTab(1)"
      >
        待支付
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 2 }" 
        @click="switchTab(2)"
      >
        待使用
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 3 }" 
        @click="switchTab(3)"
      >
        待评价
      </view>
    </view>
<view class="c1"></view>
    <!-- 订单列表（仅展示“待评价”状态示例） -->
    <view class="order-list">
      <view class="order-item" v-for="(item, index) in orderList" :key="index">
        <view class="order-header">
          <text class="order-id">订单编号:{{item.orderId}}</text>
          <image class="arrow" src="/static/right-arrow.png"></image>
        </view>
        <view class="order-info">
          <text>服务项目：{{item.serviceItem}}</text>
          <text>服务门店：{{item.store}} <image class="store-arrow" src="/static/store-arrow.png"></image> <text class="status">{{item.status}}</text></text>
          <text>下单时间：{{item.time}}</text>
        </view>
        <view class="order-actions">
          <text class="price">实付：<text class="price-num">{{item.price}}</text></text>
          <button class="btn evaluate-btn">立即评价</button>
          <button class="btn repeat-btn">再来一单</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 3, // 默认选中“待评价”标签
      orderList: [
        {
          orderId: '24255252522',
          serviceItem: '车辆保养',
          store: '大宝车辆维修店',
          status: '待评价',
          time: '2023-03-12 12:09',
          price: '230.56元'
        },
        {
          orderId: '24255252522',
          serviceItem: '车辆保养',
          store: '大宝车辆维修店',
          status: '待评价',
          time: '2023-03-12 12:09',
          price: '230.56元'
        },
        {
          orderId: '24255252522',
          serviceItem: '车辆保养',
          store: '大宝车辆维修店',
          status: '待评价',
          time: '2023-03-12 12:09',
          price: '230.56元'
        }
      ]
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
      // 可扩展：根据tab切换动态更新orderList数据（如请求不同状态的订单）
    },
    goBack() {
      // 返回上一页逻辑，如 uni.navigateBack()
    }
  }
};
</script>

<style scoped>
	.c1{
		background-color: #007aff;
		height: 50px;
	}
/* 页面基础样式 */
.my-orders {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 导航栏（与标签栏同色） */
.nav-bar {
  display: flex;
  align-items: center;
  height: 0px;
  background-color: #007aff; /* 导航栏颜色 */
  padding: -20px 0 -100px 0;
}
.back-icon {
  width: 20px;
  height: 20px;
}
.title {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

/* 标签栏（与导航栏同色，文字白色） */
.tab-bar {
  display: flex;
  background-color: #007aff; /* 与导航栏相同颜色 */
  border-bottom: none; /* 移除原白色背景的边框 */
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  color: #fff; /* 文字改为白色 */
}
.tab-item.active {
  color: #fff; /* 活跃状态文字保持白色 */
  border-bottom: 2px solid #fff; /* 活跃下划线改为白色 */
}

/* 订单列表（完全保留原有样式） */
.order-list {
  padding: 10px;
  margin-top: -55px;
}
.order-item {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 15px;
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.order-id {
  font-size: 14px;
  color: #333;
}
.arrow {
  width: 20px;
  height: 20px;
}

/* 订单信息（完全保留原有样式） */
.order-info {
  margin-bottom: 10px;
  line-height: 1.6;
  font-size: 14px;
  color: #666;
}
.store-arrow {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  margin-right: 5px;
}
.status {
  color: #007aff;
}

/* 订单操作（完全保留原有样式） */
.order-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  font-size: 14px;
  color: #f00;
}
.price-num {
  font-weight: bold;
}
.btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
}
.evaluate-btn {
  background-color: #eee;
  color: #999;
  border: 1px solid #eee;
}
.repeat-btn {
  background-color: #007aff;
  color: #fff;
  border: 1px solid #007aff;
}
</style>